<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/in.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	<link rel="stylesheet" type="text/css"	href="<%=path%>/scripts/extjs/resources/css/ext-all.css" />
	<script type="text/javascript" src="<%=path%>/scripts/extjs/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="<%=path%>/scripts/extjs/ext-all.js"></script>
	<!-- <SCRIPT src="jsontreetest.js" type=text/javascript></SCRIPT>-->
	</head>
	<body>
		<div id="blank" height= "150"/>
		<div id="tree-div" style="overflow:auto; height:530px;width:250px;border:1px solid #c3daf9;"></div>
	</body>
</html>

<script>

	Ext.onReady(function(){	
	Ext.QuickTips.init();
	
	var mytree=new Ext.tree.TreePanel({	
		el:"tree-div",	//应用到的html元素id
		animate:true,//展开,收缩时以动画形式伸展,收缩子节点,false时,则没有动画效果	
		title:"统计系统菜单",	
		collapsible:true,//可折叠	
		enableDD:true,//不仅可以拖动,还可以通过Drag改变节点的层次结构	
		enableDrag:true,//树的节点可以拖动Drag	
		rootVisible:true,//是否显示根节点	
		autoScroll:true,// 自动滚动
		trackMouseOver:false,//false则mouseover无效果	
		useArrows:true,//小箭头	默认是虚线
		autoHeight:true,
		width:200,	//面版宽度
        height:1050,//面版高度
        minSize:180,
        maxSize:550,	
        border:false, // 边框
		lines:true //节点间的横竖线(是虚线条，如果不设置useArrows:true，则都表示为虚线条)	
		//loader : new Tree.TreeLoader( {////加载节点数据	
		//dataUrl : 'OrgTreeJsonData.action'	
		//就是要动态载入数据的请求地址，这里请求时会提交一数为node的值，值为root即new Tree.AsyncTreeNode()对象的id值
		
		// })	
		// 异步加载根节点
		//root:new Ext.tree.AsyncTreeNode({
        //   id:"root",
        //   text:"根节点",//节点名称
        //   expanded:true,//展开
        //   leaf:false,//是否为叶子节点
        //   children:[{text:'子节点一',leaf:true},{id:'child2',text:'子节点二',children:[{text:"111"}]}]
        //})
	});
	
	//根节点	
	var root=new Ext.tree.TreeNode({
	    nodeType: 'async',
		id:"root",	
		text:"控制面板",	
		expanded:true	
	});
	
	//第一个子节点及其子节点	
	var sub1=new Ext.tree.TreeNode({	
		id:"news",	
		text:"新闻管理",	
		singleClickExpand:true	
	});
	
	sub1.appendChild(new Ext.tree.TreeNode({	
		id:"addNews",	
		text:"添加新闻",	
		href:"http://www.baidu.com",	
		hrefTarget:"mainFrame",	
		qtip:"打开百度",//qtip:"提示"//提示信息,不过要 Ext.QuickTips.init();下	
		listeners:{//监听	
			"click":function(node,e){	
			alert(node.text)	
			}	
		}	
	}));
	
	sub1.appendChild(new Ext.tree.TreeNode({	
		id:"editNews",	
		text:"编辑新闻"	
	}));
	
	sub1.appendChild(new Ext.tree.TreeNode({	
		id:"delNews",	
		text:"删除新闻"	
	}));
	
	root.appendChild(sub1);
		
	root.appendChild(new Ext.tree.TreeNode({	
		id:"sys",	
		text:"系统设置"	
	}));
	
	mytree.setRootNode(root);//为tree设置根节点
	
	mytree.render();//不要忘记render(),否则不显示
	
	//mytree.getRootNode().expand();// 初始化节点展开状态
	
	})

</script>
<!--
/*只有loader和AsyncTreeNode才能使children显示出来,为什么?*/
    我在api中没有找到答案,甚至连 children都没有看到,
    但是在原代码中,我们可以确定这个事实, 只有loader实例后,AsyncTreeNode的children才会被递归的添加(appendChild)到它的父节点下,
    所以象示例中的代码,一定要注意条件.其他的子节点问题不受此限制!
TreePanel基本配置参数:

//TreePanel配置参数
1.animate:true//展开,收缩动画,false时,则没有动画效果
2.autoHeight:true//自动高度,默认为false
3.enableDrag:true//树的节点可以拖动Drag(效果上是),注意不是Draggable
4.enableDD:true//不仅可以拖动,还可以通过Drag改变节点的层次结构(drap和drop)
5.enableDrop:true//仅仅drop
6.lines:true//节点间的虚线条
7.loader:Ext.tree.TreeLoader//加载节点数据
8.root:Ext.tree.TreeNode//根节点
9.rootVisible:false//false不显示根节点,默认为true
10.trackMouseOver:false//false则mouseover无效果
11.useArrows:true//小箭头

-->